import React, { FC, useEffect, useRef, useState } from 'react';
import { Area } from '@antv/g2plot';

interface IProps {
  data: any[];
}

const Chart: FC<IProps> = ({ data = [] }) => {
  const main = useRef(null);
  //   const [main, setMain] = useState<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!main.current || !data.length) return;
    const area = new Area(main.current, {
      data,
      xField: 'date',
      yField: 'value',
      seriesField: 'country',
      slider: {
        start: 0.1,
        end: 0.9,
      },
      legend: {
        position: 'top-right',
      },
    });
    area.render();
  }, [data]);

  return (
    <>
      {data.length ? (
        <div
          //   ref={(ref) => {
          //     setMain(ref);
          //   }}
          ref={main}
          style={{ width: 300, height: 300 }}
        ></div>
      ) : (
        'null'
      )}
    </>
  );
};

export default Chart;
